<template>
  <div>
    <ul>
      <li>
        <router-link id="one" to="/all_contacts"> All_contacts </router-link>
      </li>
      <li>
        <router-link id="two" to="/alice"> Alice </router-link>
      </li>
      <li>
        <router-link id="three" to="/bob"> Bob </router-link>
      </li>
    </ul>
    <button @click="Random">随机显示</button>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['one', 'two', 'three'],
    }
  },
  methods: {
    Random() {
      // console.log(
      //   document.querySelector(`#${this.list[Math.floor(Math.random() * 3)]}`)
      // )
      document
        .querySelector(`#${this.list[Math.floor(Math.random() * 3)]}`)
        .click()
    },
  },
}
</script>

<style scoped></style>
